<template>
  <el-dialog title="修改"
             :visible.sync="dialogVisible"
             width="30%">
    <el-form v-bind:model="changePassword" v-bind:rules="rules" ref="changePassword" label-width="130px">
      <el-form-item label="请输入原密码" prop="checkOriginPassword">
        <el-input type="password" v-model="changePassword.originPassword"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="请输入新密码" prop="newPassword">
        <el-input type="password" v-model="changePassword.newPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="请再次输入新密码" prop="reInputPassword">
        <el-input type="password" v-model="changePassword.reInputPassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="sendNewPassword" v-bind:disabled="disable">修 改</el-button>
  </span>
  </el-dialog>
</template>

<script>
  import {getAction, postAction} from "../axios/HttpUtils";


  export default {
    name: "ChangePassword",

    data() {
      var checkPassword = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请输入原密码'));
        } else {
          getAction("/user/checkPassword", {originPassword: this.changePassword.originPassword}).then(res => {
            console.log(res)
            if (res.code == "200") {
              return callback();
            } else {
              return callback(res.message);
            }
          });
          // if (checked) {
          //   console.log(111)
          //   return callback();
          // } else {
          //   console.log(222)
          //   this.disable = true;
          //   return callback('原密码不正确，请确认后再次输入');
          // }
        }
      };
      var checkReInputPassWord = (rule, value, callback) => {
        console.log(value)
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (value != this.changePassword.newPassword) {
          return callback(new Error('两次输入的密码不一致，请重试！'));
        } else {
          this.disable = false;
          return callback();
        }
      };
      return {
        disable:true,
        changePassword: {
          originPassword: '',
          newPassword: '',
          reInputPassword: ''
        },
        dialogVisible: false,
        msg: null,
        rules: {
          checkOriginPassword: [
            {validator: checkPassword, trigger: 'blur'}
          ],
          reInputPassword: [
            {validator: checkReInputPassWord, trigger: 'blur'}
          ]
        }
      }
    },
    destroyed() {
      console.log("destroyed")
      this.reset();
    },
    methods: {

      sendNewPassword() {
        postAction("/user/changePassword", this.changePassword).then(res => {
          if(res.code == "200"){
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.dialogVisible = false;
            this.reset();
          }else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        })
      },
      cancel() {
        this.dialogVisible = false
      },
      reset() {
        this.changePassword = {};
      }
    }
  }
</script>

<style scoped>

</style>
